<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
<style>
body{margin:0;padding:0;font-size:15px;line-height:22px;}
.pop-speech>div{padding-top:2px;}
.pop-speech .command{float: right;padding-top:2px;}
.pop-speech svg{display: inline-block;vertical-align: top;margin-left: 25px;}
.pop-speech .iplay{width:20px;height:20px;}
.pop-speech .ipause{width:12px;height:16px;margin-top:2px;margin-right: 5px;}
.pop-speech .iclose{width:22px;height:22px;margin-top:2px;background: none}
.pop-speech .isound{margin-top:-2px;}
.isound svg{width:24px;height:24px;margin-left:0;}
.isound{overflow:hidden;display: inline-block;vertical-align:top;width:24px;height:24px;margin-right: 5px;}
.isound>i{display:block;}
.pop-speech .isound>i{-webkit-animation:specking 1.2s step-end infinite;;animation:specking 1.2s step-end infinite;}
@-webkit-keyframes specking{0%{transform:translateY(0);}30%{transform:translateY(-24px);}60%{transform:translateY(-48px);}100%{transform:translateY(-48px);}}
@keyframes specking{0%{transform:translateY(0);}30%{transform:translateY(-24px);}60%{transform:translateY(-48px);}100%{transform:translateY(-48px);}}
</style>
</head>
<body>
<input type="hidden" value="" id="ttsCount">
<span id="btn-sound" class="btnSound" 
  soundurl=""
></span>
<div id="handDiv">
<div class="pop-speech" id="soundPlay"> 
  <span class="command"> 
    <svg class="iplay" style="display:none"> 
    <use xlink:href="#ico-play" /> 
    </svg> 
    <svg class="ipause"> 
    <use xlink:href="#ico-pause" /> 
    </svg>
    <i class="istop" style="display: none;"></i>
    <i class="iclose" style="display: none;"></i> 
  </span> 
  <div><span class="isound"><i>
    <svg><use xlink:href="#ico-sound-mov1" /></svg><svg><use xlink:href="#ico-sound-mov2" /></svg><svg><use xlink:href="#ico-sound-mov3" />
    </svg></i></span>正在收听：摘要</div> 
</div>
</div>
<svg style="display: none;"> 
    <symbol viewBox="0 0 24 24" id="ico-sound-mov1">
      <defs><style>.cls-1{fill:none}</style></defs><path class="cls-1" d="M0 0h24v24H0z"/><g transform="translate(2 2)"><path class="cls-1" d="M0 0h20v20H0z"/><g transform="translate(0 1)" stroke-miterlimit="10" fill="none"><path d="M15.667 15.509a7.99 7.99 0 0 0 3.349-6.508 7.99 7.99 0 0 0-3.349-6.51" opacity="0" stroke="#222" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/><path d="M14 11.946a4.023 4.023 0 0 0 .539-.586 3.982 3.982 0 0 0 .79-2.387 3.982 3.982 0 0 0-.805-2.407A4.023 4.023 0 0 0 14 6" opacity="0" stroke="#222" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/><g><path d="M10.21 15.963L4.7 12.029H2a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h2.7L10.21.094A.5.5 0 0 1 11 .5v15.057a.5.5 0 0 1-.5.5.492.492 0 0 1-.29-.094z" transform="translate(0 .972)"/><path d="M9.5 13.613V2.443L5.57 5.25l-.39.28H2a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 .5.5h3.18l.391.279L9.5 13.613m.998 2.444a.492.492 0 0 1-.288-.094L4.7 12.028H2a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h2.7L10.21.094A.5.5 0 0 1 11 .5v15.055a.5.5 0 0 1-.502.501z" fill="#222" transform="translate(0 .972)"/></g></g></g>
    </symbol>
    <symbol viewBox="0 0 24 24" id="ico-sound-mov2">
      <defs><style>.cls-1{fill:none}</style></defs><path class="cls-1" d="M0 0h24v24H0z"/><g transform="translate(2 2)"><path class="cls-1" d="M0 0h20v20H0z"/><g transform="translate(0 1)" stroke-miterlimit="10" fill="none"><path d="M15.667 15.509a7.99 7.99 0 0 0 3.349-6.508 7.99 7.99 0 0 0-3.349-6.51" opacity="0" stroke="#222" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/><path d="M14 11.946a4.023 4.023 0 0 0 .539-.586 3.982 3.982 0 0 0 .79-2.387 3.982 3.982 0 0 0-.805-2.407A4.023 4.023 0 0 0 14 6" opacity=".6" stroke="#222" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/><g><path d="M10.21 15.963L4.7 12.029H2a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h2.7L10.21.094A.5.5 0 0 1 11 .5v15.057a.5.5 0 0 1-.5.5.492.492 0 0 1-.29-.094z" transform="translate(0 .972)"/><path d="M9.5 13.613V2.443L5.57 5.25l-.39.28H2a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 .5.5h3.18l.391.279L9.5 13.613m.998 2.444a.492.492 0 0 1-.288-.094L4.7 12.028H2a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h2.7L10.21.094A.5.5 0 0 1 11 .5v15.055a.5.5 0 0 1-.502.501z" fill="#222" transform="translate(0 .972)"/></g></g></g>
    </symbol>
    <symbol viewBox="0 0 24 24" id="ico-sound-mov3">
      <defs><style>.cls-1{fill:none}</style></defs><path class="cls-1" d="M0 0h24v24H0z"/><g transform="translate(2 2)"><path class="cls-1" d="M0 0h20v20H0z"/><g transform="translate(0 1)" stroke-miterlimit="10" fill="none"><path d="M15.667 15.509a7.99 7.99 0 0 0 3.349-6.508 7.99 7.99 0 0 0-3.349-6.51" opacity=".3" stroke="#222" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/><path d="M14 11.946a4.023 4.023 0 0 0 .539-.586 3.982 3.982 0 0 0 .79-2.387 3.982 3.982 0 0 0-.805-2.407A4.023 4.023 0 0 0 14 6" opacity=".6" stroke="#222" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/><g><path d="M10.21 15.963L4.7 12.029H2a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h2.7L10.21.094A.5.5 0 0 1 11 .5v15.057a.5.5 0 0 1-.5.5.492.492 0 0 1-.29-.094z" transform="translate(0 .972)"/><path d="M9.5 13.613V2.443L5.57 5.25l-.39.28H2a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 .5.5h3.18l.391.279L9.5 13.613m.998 2.444a.492.492 0 0 1-.288-.094L4.7 12.028H2a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h2.7L10.21.094A.5.5 0 0 1 11 .5v15.055a.5.5 0 0 1-.502.501z" fill="#222" transform="translate(0 .972)"/></g></g></g>
    </symbol>
    <symbol viewBox="0 0 20 20" id="ico-play">
      <g data-name="Group 3" fill="none"><path d="M0 0h20v20H0z"/><g data-name="Play" stroke-miterlimit="10"><path d="M2 10.014l.007 7.147a1.85 1.85 0 0 0 2.776 1.619l6.145-3.573 6.145-3.573a1.876 1.876 0 0 0 0-3.238l-6.146-3.574-6.144-3.574A1.864 1.864 0 0 0 2.007 2.9z"/><path d="M4.007 3.11L4 10.013l.007 6.906 5.915-3.44 5.955-3.464-5.955-3.463-5.915-3.44M3.876 1c.303 0 .613.078.907.248l6.144 3.574 6.145 3.573c1.237.72 1.237 2.519 0 3.238l-6.145 3.574-6.144 3.573a1.827 1.827 0 0 1-.924.253 1.86 1.86 0 0 1-1.852-1.872L2 10.014 2.007 2.9c0-1.098.895-1.9 1.869-1.9z" fill="#222"/></g></g>
    </symbol>
    <symbol viewBox="0 0 12 16" id="ico-pause">
      <path style="fill:#222222" d="M0,0.5v15c0,0.28 0.22,0.5 0.5,0.5h1c0.28,0 0.5,-0.22 0.5,-0.5v-15c0,-0.28 -0.22,-0.5 -0.5,-0.5h-1c-0.28,0 -0.5,0.22 -0.5,0.5zM10,0.5v15c0,0.28 0.22,0.5 0.5,0.5h1c0.28,0 0.5,-0.22 0.5,-0.5v-15c0,-0.28 -0.22,-0.5 -0.5,-0.5h-1c-0.28,0 -0.5,0.22 -0.5,0.5z" />
    </symbol>
</svg>
<script src="jquery-2.0.3.min.js"></script> 
<script>
String.prototype.Trim = function() {
	return this.replace(/^\s*|\s*$/g, "");
}

function recordLog(watchflag) {
	try {
		$.getScript("http://stat.baike.com/js/webstat_manage.js", function() {
			StatVirtualTraffic(document.referrer, window.location,
					"stat_hdstat_onclick_" + watchflag);
		});
	} catch (e) {
	}
}
var nowAudio;

var nextUrl = function(url){
	var count = Number($("#ttsCount").val());
	var as=url;
	var as1 = url.split(".mp3");
      if(as1.length>1){
        var as2 =as1[0].split("_");
        if(as2.length>1 && as2[as2.length-1]<count){
          as2[as2.length-1]++;
          as = as2[0]+"_"+as2[as2.length-1];						
        }else{
          as = as2[0]+"_"+"1";
        }
        as += ".mp3"+as1[1];
      }
	return as
}

var createAudio = function(url,flag,indexFlag){
	var objs = $('.audioSummary');
	var flag = 0;
	if(objs.length>0 ){
		$('.audioSummary').each(function() {
			var surl = $(this).attr('src');
			if(url==surl){
				flag=1;
			}
		});
		if(flag==0){
		var audioSummary;
		if(indexFlag==1){
			audioSummary = $('<audio id="nowAudio"></audio>');
		}else{
			audioSummary = $('<audio id="nextAudio"></audio>');
		}		
		audioSummary.attr('src',url);
		audioSummary.attr('preload','true');
		audioSummary.attr('class','audioSummary');			
		audioSummary.appendTo('body');
		}		
	}else{
		var audioSummary;
		if(indexFlag==1){
			audioSummary = $('<audio id="nowAudio"></audio>');
		}else{
			audioSummary = $('<audio id="nextAudio"></audio>');
		}
		audioSummary.attr('src',url);
		audioSummary.attr('preload','true');
		audioSummary.attr('class','audioSummary');			
		audioSummary.appendTo('body');
  }
  nowAudio = $("#nowAudio"); 
}
function getUrlKey(name){
    let result=''
    result = decodeURIComponent((new RegExp('[?|&]'+name+'='+'([^&;]+?)(&|#|;|$)').exec(location.href)||[,""])[1].replace(/\+/g,'%20'))||null;
    if (result == location.hash||result == null) result = ''
    return result;
}
  $("#ttsCount").attr({value:getUrlKey('count')}) 
  $("#btn-sound").attr({soundurl:getUrlKey('url')})
	const btnSound = document.getElementById("btn-sound")
	const popSound = document.getElementById("handDiv")
function soundPlay(){
  if(btnSound.className=="btnSound"){
    popSound.className="fixed-bot on"
    btnSound.className = "btnSound on"
    popSound.getElementsByClassName("isound")[0].getElementsByTagName("i")[0].style=""
  }else{
    popSound.className="fixed-bot"
    btnSound.className = "btnSound"
    $('.istop').click();
    $('.iplay').hide();
    $('.ipause').show();
    return;
  }
  nowAudio[0].play().catch(function(error) {
      console.error('抱歉，初次播放失败，请点击播放按钮重新播放',error);
      setTimeout(() => {
        soundPause()
      }, 10);     
    });
  nowAudio[0].addEventListener('ended', function () {
    var nextAudioSrc = $("#nextAudio").attr("src");
    if(undefined != nextAudioSrc && ''!=nextAudioSrc){
      nowAudio.attr('src',nextAudioSrc);
        $("#nextAudio").attr("src",nextUrl(nextAudioSrc));
    }				
    nowAudio[0].play()
  });	
}
function soundPause(){
  if(popSound.getElementsByClassName("iplay")[0].style.display == "none" ){
    popSound.getElementsByClassName("ipause")[0].style.display = "none"
    popSound.getElementsByClassName("iplay")[0].style = ""
    popSound.getElementsByClassName("isound")[0].getElementsByTagName("i")[0].style.animationPlayState="paused"
    nowAudio[0].pause();
  }else{
    popSound.getElementsByClassName("iplay")[0].style.display = "none"
    popSound.getElementsByClassName("ipause")[0].style = ""
    popSound.getElementsByClassName("isound")[0].getElementsByTagName("i")[0].style = ""
    nowAudio[0].play();
  }
}
	btnSound.onclick=function(){soundPlay()}  
	popSound.getElementsByClassName("ipause")[0].onclick = function(){soundPause()}
	popSound.getElementsByClassName("iplay")[0].onclick = function(){soundPause()}
	popSound.getElementsByClassName("istop")[0].onclick = function(){
		popSound.getElementsByClassName("ipause")[0].style.display = "none"
		popSound.getElementsByClassName("iplay")[0].style = ""
		popSound.getElementsByClassName("isound")[0].getElementsByTagName("i")[0].style.animationIterationCount="1" 
		nowAudio[0].pause();
			$('.btnSound').each(
				function() {
					var surl = $(this).attr('soundUrl');
					var str =  surl.split(".mp3");
					var id;
					if(str.length>1){
						surl = str[0]+"_1.mp3"+str[1];
						var s = str[0].split("/");
						if(s.length>1){
							id = s[s.length-2];
						}						
					}
					$("#nowAudio").attr("src",surl);
					$("#nextAudio").attr("src",nextUrl(surl));
			});
  }

$(document).ready(function(){
  if($("#btn-sound").attr("soundurl") === "") return;
  setTimeout(function() {
    $('.btnSound').each(
        function() {
          var surl = $(this)
              .attr('soundUrl');
              var str =  surl.split(".mp3");
              if(str.length>1){
                surl = str[0]+"_1.mp3"+str[1];
              }
          createAudio(surl,0,1);
          setTimeout(function() {
            createAudio(nextUrl(surl),1,2);
            btnSound.onclick()
          }, 1500);
        });
  }, 1000);
})
</script>


</body>
</html>